<template>
  <h1>{{ msg }}</h1>
  <button type="button" @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <n-config-theme :theme="darkTheme" :local="zhCN" :date-locale="dateZhCN">
      <n-space vertiacl>
          <n-input/>
          <n-date-picker/>
      </n-space>
  </n-config-theme>
  <n-avatar
      size="small"
      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
    />
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import {NConfigProvider,NInput,NDatePicker,NSpace,NAvatar} from 'naive-ui'
import {createTheme,inputDark,datePickerDark,zhCN,dateZhCN} from 'naive-ui'

export default defineComponent({
  name: 'HelloWorld',
  components:{
      NConfigProvider,
      NInput,
      NDatePicker,
      NSpace,
      NAvatar,
  },
  data(){
      return {
          msg:"Hello"
      }
  },
  setup: () => {
    const count = ref(0)
    return { count,
        darkTheme:createTheme([inputDark,datePickerDark]),
        zhCN,
        dateZhCN
     }
  }
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
body{
    background: black;
}
</style>
